<script setup>
import { onMounted } from 'vue';
import HeaderScreenIndex from '@/components/HeaderScreenIndex.vue';
import MapIndex from '@/components/MapIndex.vue';
import { ADD_MAPBOX_BASE_LAYER_OBSCURATION } from '@/utils/map-utils';
import { GET_MAPBOX_MAP, SET_MAP_DRAG_ROTATE } from '@/utils/map-utils';
import { geo } from './geo.js';

onMounted(() => {
  setTimeout(() => {
    const map = GET_MAPBOX_MAP();

    map.setMaxBounds([
      [122.271405, 41.40108],
      [123.43541, 42.50117],
    ]);

    SET_MAP_DRAG_ROTATE();
    ADD_MAPBOX_BASE_LAYER_OBSCURATION(map, geo);
  }, 500);
});
</script>
<template>
  <div class="relative left-0 top-0 h-full w-full overflow-hidden">
    <HeaderScreenIndex :screen-title="'防火预警系统可视化大屏'" />
    <!-- 地图组件 -->
    <!-- <div id="map-fire-screen" />
      -->
    <div class="m-auto h-555px w-465px">
      <MapIndex :map-id="'map-fire-screen'" :map-roles="['']" />
    </div>
  </div>
</template>

<style scoped lang="scss">
#map-fire-screen {
  width: 465px;
  height: 555px;
}
</style>
